<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box{
            width:200px;
            height:200px;
            border:1px solid red;
        }
    </style>
</head>
<body>
    <div id="box"></div>
    <button>点击更换颜色</button>
    <ul id="wrap"></ul>
</body>
</html>
<script>
    var box = document.querySelector("#box");
    var btn = document.querySelector("button");
    var ul = document.querySelector("ul");
    var arr = [
        {name:'Jack',age:18},
        {name:'Rose',age:20},
        {name:'Tom',age:22}
    ];
//一种：
    // var res = arr.map(function(value,index){
    //     return `<li><span>姓名：</span><span>${value.name}</span></li> 
    //             <li><span>年龄：</span><span>${value.age}</span></li>`
    // })
    // ul.innerHTML = res.join('');
//二种：
    // var res='';
    //     for(var key in arr){
    //          ul.innerHTML += `<li><span>姓名：</span><span>${arr[key].name}</span></li> 
    //                  <li><span>年龄：</span><span>${arr[key].age}</span></li>`     
    // }
    

// setInterval(function(){
//     var time = new Date();
//     var year = time.getFullYear()
//     var Month = time.getMonth();
//     var date = time.getDate();
//     var hours = time.getHours()
//     var min = time.getMinutes()
//     var sec = time.getSeconds()
//     ul.innerText = `${year}年${Month}月${date}日${hours}时${min}分${sec}秒`
// },1000)





// function fn(){
//     return Math.floor(Math.random()*256);
// }
// btn.onclick = function(){
//     box.style.background = `rgb(${fn()},${fn()},${fn()})`;
// }


</script>